<template>
	<view class="main">
		<view
			class="header"
			@click="navigateTo('/pages/tabs/mine/settings/about/selfData')">
			<view class="header-left">
				<img class="header-img" :src="avatarPic" alt="" />
			</view>
			<view class="header-right">
				<up-text
					:text="userInfo.username"
					bold
					size="18px"
					color="rgba(0, 0, 0, 0.9)"
					suffixIcon="arrow-right"
					iconStyle="font-size: 25rpx;color:#191919;font-weight:900;vertical-align: middle;padding:0 10rpx"></up-text>
				<view class="user-phone">
					<img class="phone-icon" :src="authPic" alt="" />
					<up-text
						:text="userInfo.phone"
						class="text"
						size="13px"
						color="#333333"></up-text>
				</view>
			</view>
		</view>
		<up-cell-group :border="false">
			<up-cell
				v-for="(item, index) in cellList"
				:key="index"
				:title="item.name"
				isLink
				:url="item.url"
				rightIconStyle="color:#000000e6"></up-cell>
		</up-cell-group>
	</view>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
const avatarPic = resolveStaticPath("image/mine/avatar.png");
const authPic = resolveStaticPath("image/mine/authentication.png");
// 国际化
const { locale, t } = useI18n();
interface link {
	name: string;
	url: string;
}
const navigateTo = (url: string) => {
	uni.navigateTo({
		url: url,
	});
};
const userInfo = useUniversalStorage("userinfo", {
	username: "",
	phone: "",
	staff_id: "",
	customer_type: "",
});
const cellList = computed<link[]>(() => [
	{
		name: t("my.list.0"),
		url: "/pages/tabs/mine/settings/setup/index",
	},
	{
		name: t("my.list.1"),
		url: "pages/tabs/mine/externalLink/index?type=0",
	},
	{
		name: t("my.list.2"),
		url: "pages/tabs/mine/settings/about/index",
	},
]);
</script>

<style lang="scss" scoped>
.main {
	width: 100%;
	background-color: #fff;
	overflow-x: hidden;
	height: 100vh;
}
.header {
	position: relative;
	top: 0;
	width: 100%;
	background: linear-gradient(#d0e7ff, #ffffff);
	padding: 40rpx;
	padding-top: 80rpx;
	// display: flex;
}
.header-left {
	width: 20%;
	.header-img {
		width: 80%;
		height: 80%;
		border-radius: 80%;
		display: block;
	}
}
.header-right,
.header-left {
	vertical-align: middle;
	display: inline-block;
}
.header-right {
	.user-phone {
		display: flex;
		align-items: center;
		img {
			display: inline-block;
			vertical-align: middle;
			width: 50rpx;
			position: relative;
		}
		.text {
			padding: 0 10rpx;
			background: #d7ecfe;
			border-radius: 9px;
		}
	}
}
</style>
